<template>
  <!-- 新碟上架 -->
  <div class="newests">
    <scroll class="newests-scroll"
            ref="scroll">
      <!-- 最新专辑-->
      <div class="hot-newest">
        <span class="name">最新专辑</span>
        <div class="newestItem">
          <div class="newest-item"
               v-for="(item,index) in list"
               :key="index"
               @click="enterDetial(index)">
            <div class="bckimg">
              <img :src="item.blurPicUrl"
                   alt=""
                   @load="newSongImgLoad()">
            </div>
            <span>{{item.name}}</span>
            <span>{{item.artists[0].name}}</span>
          </div>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll.vue'
import { _getNewest } from 'network/detail'
export default {
  name: 'Album',
  data () {
    return {
      musiclist: [],
      list: [],
      imgCount: 0
    }
  },
  components: { Scroll },
  created () {
    // 最新专辑
    _getNewest().then(res => {
      this.list = res.data.albums;
    })
  },
  methods: {
    // 专辑详情
    enterDetial (index) {
      this.$router.push('/album/' + this.list[index].id)
    },
    // 图片加载
    newSongImgLoad () {
      if (this.imgCount === this.musiclist.length) {
        this.$refs.scroll.refresh()
      }
      this.imgCount++
    }
  }

}
</script>

<style scoped>
.newests {
  width: 100%;
  height: 100%;
  color: #000;
  box-sizing: border-box;
  font-size: 15px;
  padding: 20px 30px;
  overflow: hidden;
}
.newests-scroll {
  height: 100%;
}
.newests .name {
  display: block;
  width: 100%;
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 3px solid #00aa85;
}
.newestItem {
  width: 100%;
  height: 100%;
}
.newest-item {
  width: 180px;
  height: 180px;
  float: left;
  margin: 0px 12px;
}
.newest-item span {
  display: block;
  overflow: hidden;
}
.bckimg {
  width: 150px;
  height: 130px;
  background: url("../../assets/img/newest/coverall.png") no-repeat;
  background-position: 0 -845px;
}
.bckimg img {
  width: 130px;
  height: 130px;
}
</style>
